<template>
  <a-col :span="span" class="" style="height: 360px;padding: 8px;">
    <div class="block" :id="EchartId"></div>
  </a-col>
</template>

<script>
import uuidv1 from "uuid/v1";
import {
  buildOption,
  buildTitle,
  buildGrid,
  buildXAxis,
  buildYAxis,
  buildPieSeries,
  buildLineSeries,
  buildSeries
} from "./buildEChartOption";
import { buildDateAxis } from "@/unit/tool";

export default {
  name: "Pie",
  props: {
    span: Number,
    pieData: Object
  },
  data() {
    return {
      myChart: "",
      EchartId: ""
    };
  },
  watch: {
    pieData: function(newVal) {
      let { dataLists, ...restOption } = newVal;
      let pieLists = [];
      if (dataLists.length > 0) {
        let pieSeries = buildPieSeries(dataLists);
        let seriesLists = buildSeries(pieSeries);
        console.log(pieSeries);
        this.myChart.setOption({
          ...restOption,
          series: seriesLists
        });
      }
    }
  },
  methods: {
    init_chart() {
      // 绘制图表
      let myChart = this.myChart;

      let option = buildOption({
        legend: {
          right: "100px",
          top: "80px"
        },
        grid: buildGrid()
      });

      myChart.setOption(option);
    }
  },
  created() {
    this.EchartId = uuidv1(); //获取随机id
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(document.getElementById(this.EchartId));
    this.init_chart();
  },
  destroyed() {
    this.myChart.clear();
  }
};
</script>

<style scoped="scoped">
.block {
  /* width: 540px; */
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
}
</style>
